<template>
  <div class="home-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="mainbody">
      <div class="top-container">
        <div class="box-card" @click="getUserChart">
          <div class="title">用户统计</div>
          <div class="number">{{typeNum.users}}</div>
          <div class="type">当前用户总数量</div>
        </div>
        <div class="box-card" @click="getGoods">
          <div class="title">商品统计</div>
          <div class="number">{{typeNum.goods}}</div>
          <div class="type">当前总商品数量</div>
        </div>
        <div class="box-card" @click="getOrder">
          <div class="title">订单统计</div>
          <div class="number">{{typeNum.orders}}</div>
          <div class="type">当前总订单数量</div>
        </div>
        <div class="box-card">
          <div class="title">销售统计</div>
          <div class="number">{{parseFloat(typeNum.sum).toFixed(2)}}</div>
          <div class="type">当前总销售额（元）</div>
        </div>
      </div>
      <div class="bottom-container">
        <div class="bottom-item">
          <div class="chart-box" v-if="!isOrder">
            <div
              id="myCharts"
              ref="myCharts"
              class="chart"
              style="width: 100%; height: 100%"
            ></div>
          </div>
          <div class="chart-box" v-if="!isOrder">
            <div
              id="myCharts2"
              ref="myCharts2"
              class="chart"
              style="width: 100%; height: 100%"
            ></div>
          </div>
          <div class="chart-box" v-if="isOrder">
            <div
              id="myCharts3"
              ref="myCharts3"
              class="chart"
              style="width: 100%; height: 100%"
            ></div>
          </div>
          <div class="chart-box" v-if="isOrder">
            <div class="time-box-container">
              <div class="time-box">
                <el-timeline>
                  <el-timeline-item v-for="(item,index) in orderTimeLine" :key="index">
                    <!-- 时间线左侧 -->
                    <div class="companydel">{{item.createTime}}</div>
                    <!-- 时间线右侧 -->
                    <div class="contentdel">
                      <span>用户</span>
                      <span class="content-emphasis">{{item.userName}}</span>
                      <span>在店铺</span>
                      <span class="content-emphasis">{{item.shopName}}</span>
                      <span>购买了</span>
                      <span class="content-emphasis">{{item.goodName}}</span>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      chart1: null,
      chart2: null,
      chart3: null,
      isOrder: false,
      orderTimeLine: [],
      typeNum: {},
      time: null
    }
  },
  created () {
    this.getTypeNum()
  },
  mounted () {
    this.chart1 = this.$echarts.init(this.$refs.myCharts)
    this.chart2 = this.$echarts.init(this.$refs.myCharts2)
    this.getUserPie()
    this.getUserCreateChart()
    this.timer = setInterval(() => {
      this.getTypeNum()
    }, 300000)
  },
  computed: {},
  methods: {
    // 获取用户组成分析
    async getUserPie () {
      const { data: res } = await this.$http.get('/analysis/getUserPie')
      if (res.code !== 200) return res.cc(res.msg)
      const option = {
        title: {
          text: '用户组成分析',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}人 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: res.data.catalogue
        },
        series: [
          {
            name: '用户角色',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: res.data.data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chart1.setOption(option)
    },
    // 用户增长趋势 -Todo
    async getUserCreateChart () {
      const { data: res } = await this.$http.get('/analysis/getUserLine')
      if (res.code !== 200) return this.$message.error(res.msg)
      const option = {
        title: {
          text: '用户增长情况分析'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#ddd'
            }
          },
          backgroundColor: 'rgba(255,255,255,1)',
          padding: [5, 10],
          textStyle: {
            color: '#7588E4'
          },
          extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
        },
        legend: {
          right: 20,
          orient: 'vertical',
          data: ['今日', '昨日']
        },
        xAxis: {
          type: 'category',
          data: res.data.category,
          boundaryGap: false,
          splitLine: {
            show: false,
            interval: 'auto',
            lineStyle: {
              color: ['#D4DFF5']
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#609ee9'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '单位：人',
          minInterval: 1,
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#D4DFF5']
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#609ee9'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        },
        series: [
          {
            name: '今日',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 6,
            data: res.data.today,
            itemStyle: {
              normal: {
                color: '#f7b851'
              }
            },
            lineStyle: {
              normal: {
                width: 3
              }
            }
          },
          {
            name: '昨日',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 6,
            data: res.data.yesterday,
            itemStyle: {
              normal: {
                color: '#58c8da'
              }
            },
            lineStyle: {
              normal: {
                width: 3
              }
            }
          }
        ]
      }
      this.chart2.setOption(option)
    },
    // 用户统计
    getUserChart () {
      this.isOrder = false
      this.chart1.dispose()
      this.chart2.dispose()
      if (this.chart3 !== null) {
        this.chart3.dispose()
      }
      this.$nextTick(() => {
        this.chart1 = this.$echarts.init(this.$refs.myCharts)
        this.chart2 = this.$echarts.init(this.$refs.myCharts2)
        this.getUserPie()
        this.getUserCreateChart()
      })
    },
    // 商品销量前五
    async getGoodsTop5 () {
      const { data: res } = await this.$http.get('/analysis/getGoodsTop5')
      if (res.code !== 200) return this.$message.error(res.msg)
      const option = {
        title: {
          text: '商品销售量前五'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['销售量', '销售金额'],
          align: 'right',
          right: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: res.data.category,
            axisLabel: {
              interval: 0,
              formatter: function (params) {
                var val = ''
                // 判断长度
                if (params.length > 4) {
                  // 替换原字符
                  val = params.substr(0, 4) + '...'
                  // 返回
                  return val
                } else {
                  // 否则返回原string
                  return params
                }
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '销售量',
            type: 'bar',
            data: res.data.saleCount
          },
          {
            name: '销售金额',
            type: 'bar',
            data: res.data.sum
          }
        ]
      }
      this.chart1.setOption(option)
    },
    // 获取销售额前五的店铺
    async getShopTop5 () {
      const { data: res } = await this.$http.get('/analysis/getGoodsTop5')
      if (res.code !== 200) return res.cc(res.msg)
      const option = {
        title: {
          text: '店铺销售金额前5'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['销售金额'],
          align: 'right',
          right: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: res.data.category,
            axisLabel: {
              interval: 0,
              formatter: function (params) {
                var val = ''
                // 判断长度
                if (params.length > 4) {
                  // 替换原字符
                  val = params.substr(0, 4) + '...'
                  // 返回
                  return val
                } else {
                  // 否则返回原string
                  return params
                }
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'aa',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '销售金额',
            type: 'bar',
            data: res.data.sum
          }
        ]
      }
      this.chart2.setOption(option)
    },
    // 商品统计
    getGoods () {
      this.isOrder = false
      this.chart1.dispose()
      this.chart2.dispose()
      if (this.chart3 !== null) {
        this.chart3.dispose()
      }
      this.$nextTick(() => {
        this.chart1 = this.$echarts.init(this.$refs.myCharts)
        this.chart2 = this.$echarts.init(this.$refs.myCharts2)
        this.getGoodsTop5()
        this.getShopTop5()
      })
    },
    getOrder () {
      this.chart1.dispose()
      this.chart2.dispose()
      this.isOrder = true
      this.$nextTick(() => {
        this.getOrderLine()
        this.getOrderTimeline()
      })
    },
    async getOrderLine () {
      const { data: res } = await this.$http.get('/analysis/getOrderLine')
      if (res.code !== 200) return res.cc(res.msg)
      this.chart3 = this.$echarts.init(this.$refs.myCharts3)
      const option = {
        title: {
          text: '订单增长趋势'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#ddd'
            }
          },
          backgroundColor: 'rgba(255,255,255,1)',
          padding: [5, 10],
          textStyle: {
            color: '#7588E4'
          },
          extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
        },
        legend: {
          right: 20,
          orient: 'vertical',
          data: ['今日', '昨日']
        },
        xAxis: {
          type: 'category',
          data: res.data.category,
          boundaryGap: false,
          splitLine: {
            show: false,
            interval: 'auto',
            lineStyle: {
              color: ['#D4DFF5']
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#609ee9'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#D4DFF5']
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#609ee9'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        },
        series: [
          {
            name: '今日',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 6,
            data: res.data.today,
            itemStyle: {
              normal: {
                color: '#f7b851'
              }
            },
            lineStyle: {
              normal: {
                width: 3
              }
            }
          },
          {
            name: '昨日',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 6,
            data: res.data.yesterday,
            itemStyle: {
              normal: {
                color: '#58c8da'
              }
            },
            lineStyle: {
              normal: {
                width: 3
              }
            }
          }
        ]
      }
      this.chart3.setOption(option)
    },
    async getTypeNum () {
      const { data: res } = await this.$http.get('/analysis/getAllTypeNum')
      if (res.code !== 200) return this.$message.error(res.msg)
      this.typeNum = res.data
      // setInterval(() => {

      // }, 300000)
    },
    async getOrderTimeline () {
      const { data: res } = await this.$http.get('/analysis/getOrderTimeLine')
      if (res.code !== 200) return this.$message.error(res.msg)
      this.orderTimeLine = res.data
    }

  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>
<style lang="less" scoped>
.home-container {
  background: #f5f7fe;
  height: 100%;
  width: 100%;
  .mainbody {
    width: 100%;
    margin-top: 20px;
    height: calc(100% - 40px);

    .top-container {
      display: flex;
      justify-content: space-between;
      .box-card {
        width: calc(25% - 10px);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        color: #303133;
        transition: 0.3s;
        padding: 20px;
        margin-top: 20px;
        cursor: pointer;
        &:hover {
          box-shadow: 10px 10px 10px #ccc;
        }
        .title {
          font-weight: bold;
          font-size: 18px;
          color: #fff;
        }
        .number {
          font-family: number;
          text-align: center;
          font-size: 52px;
          font-weight: bold;
          color: #fff;
        }
        .type {
          color: #fff;
          font-size: 16px;
          // font-weight: bold;
        }
      }
      .box-card:nth-child(1) {
        background: #419dff;
      }
      .box-card:nth-child(2) {
        background: #e5a23a;
      }
      .box-card:nth-child(3) {
        background: #69c238;
      }
      .box-card:nth-child(4) {
        background: #929398;
      }
    }
    .bottom-container {
      height: calc(100% - 170px);
      .bottom-item {
        display: flex;
        justify-content: space-between;
        height: calc(100% - 20px);
        .chart-box {
          width: calc(50% - 10px);
          height: 100%;
          border-radius: 8px;
          background: #fff;
          border: 1px solid #ebeef5;
          overflow: hidden;
          color: #303133;
          transition: 0.3s;
          margin-top: 20px;
          box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
          padding: 20px;
          .chart {
            height: 100%;
            width: 100%;
          }
        }
      }
    }
  }
}
.time-box-container {
  height: 100%;
  width: 100%;
  overflow: auto;
  position: relative;
  .time-box {
    position: absolute;
    top: 15px;
    left: 160px;
    width: calc(100% - 160px);
    .companydel {
      position: absolute;
      top: 1px;
      left: -153px;
    }
    .contentdel {
      position: absolute;
      top: -13px;
      padding: 10px;
      border: 1px solid #e4e7f0;
      border-radius: 8px;
      font-size: 0.08rem;
      color: #6f6f6f;

      .content-emphasis {
        color: #419dff;
      }
    }
    .contentdel::after {
      position: absolute;
      top: 34px;
      left: -8px;
      top: 15px;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-right: 10px solid #fff;
      content: "";
    }
    .contentdel::before {
      position: absolute;
      top: 34px;
      left: -10px;
      top: 15px;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-right: 10px solid #e4e7f0;
      content: "";
    }
  }
}
</style>
<style lang="less">
.el-timeline-item {
  height: 30px;
  margin-bottom: 30px;
}
</style>
